div[data-controller="modal"].modal {
    --bs-modal-margin: 1.65rem;
    --bs-modal-header-padding: 0;
    --bs-modal-width: 75vw;
    --bs-modal-padding: 40px;

    @include media-breakpoint-up(lg) {
        --bs-modal-width: 40rem;
    }

    .input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
        border-radius: 0rem 2rem 2rem 0rem;
    }

    .input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating), .input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n+3), .input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-control, .input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-select {
        border-radius: 2rem 0rem 0rem 2rem;
    }

    .modal-content {
        box-shadow: none;
        background-color: transparent;
        border: none;
    }

    .modal-header {
        border: none;
    }

    .input-group {
        width: 100%;
        display: flex;
    }

    .modal-body {
        margin-top: 3rem;
        background-color: #{$gray-600};
        border: 2px solid #{$gray-100}; 
        border-radius: $border-radius;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        display: flex;
        width: 100%;
        height: 100%;
    }
}
